<template>
  <div>
    <h1 :title="title">我是子组件的内容</h1>
    <button v-bind="$attrs" :style="`color: ${$attrs.color}`" @click="$attrs.onAbc(4)">
      我是子组件的按钮
    </button>
  </div>
</template>

<script setup>
// useAttrs 可以获取标签身上的属性与属性值，还可以获取自定义事件
// 如果使用 defineProps 拿到属性，那么使用 $attrs 就获取不到该属性了，defineProps 比 $attrs 优先级高
import {useAttrs} from "vue";

const $attrs = useAttrs();
console.log("$attrs", $attrs);
// 注意事项（重点）
// 需要注意的是：props和useAttrs方法都可以获取到父组件传过来来的属性和属性值；
// 但是如果一旦用prop接受了其中的某个属性和属性值，那么useAttrs就接受不到这个属性和属性值。
defineProps(['title'])
</script>